<template>
	<yd-layout id='liveListCourse'>

		<yd-infinitescroll :callback="getIndexCourseList" ref="infinitescrollDemo">
			<IndexCourseList @goCourseClass='goCourseClass' slot="list" :dataList='courseDataList'></IndexCourseList>
			<!-- 数据全部加载完毕显示 -->
			<span slot="doneTip">没有更多数据了~~</span>

			<!-- 加载中提示，不指定，将显示默认加载中图标 -->
			<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
		</yd-infinitescroll>

		<!--slot='bottom'-->


		<yd-popup v-model="showPopToast" position="bottom" width="100%" :close-on-masker='false'>

			<div class="pop_content">

				<div class="pop_top">
					<div class="pop_title">请输入听课密码</div>
					<div class="pop_label">*听课密码请联系领导人获取*</div>

					<div class="pop_input_f">
						<!-- oninput="if(value.length>16)value=value.slice(0,16)"-->
						<input class="pop_input" v-model="passwordNum" type="text" placeholder="输入密码" />
					</div>
				</div>
				<div class="pop_btn">
					<div class="pop_btn_left" @click="showPopToast=false">取消</div>
					<div class="pop_btn_right" @click="postPassword">确定</div>
				</div>
			</div>
		</yd-popup>

		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	//import mixinIndex from '../../mixin/mixinIndex.js'
	import IndexCourseList from '../../components/IndexCourseList/IndexCourseList.vue'
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	export default {
		mixins: [],
		components: {
			[BackTop.name]: BackTop,
			[Popup.name]: Popup,
			[InfiniteScroll.name]: InfiniteScroll,
			[IndexCourseList.name]: IndexCourseList,

		},
		data() {
			return {
				showPopToast: false,
				liveList: [],
				pageNum: 1,
				pageCount: 10,

				courseDataList: [],
				passwordNum: '',
				courseId: '',
			}
		},
		created() {

		},
		watch: {

		},
		computed: {

		},
		async mounted() {
			document.title = '专栏网课'
			var ua = navigator.userAgent;
			if(this.$root.isPc != 'pc' && ua.match(/MicroMessenger/i) != 'MicroMessenger' && (this.$root.isPcOS == 'Phone' || this.$root.isPcOS == 'Linux')) {
				await this.getToken()
			}

			this.getIndexCourseList();
			//this.getMine();
			//this.livingList()
		},
		methods: {
			//去课程目录
			goCourseClass(item) {
				if(item.is_require_pwd == 1 && item.is_input_pwd != 1) {
					this.courseId = item.id
					this.passwordNum = ''
					this.showPopToast = true
					return
				}
				this.$router.push({
					name: 'courseClass',
					query: {
						id: item.id
					}
				})
			},
			//获取名片信息
			getMine() {
				this.$root.ajax({
					name: 'my/namecard',
					params: {
						uid: this.$root.userInfo.me.id
					}
				}).then((d) => {
					if(!d.data.wechat_code) {
						this.showMine = false
					}
				})
			},
			//输入密码
			postPassword() {
				if(!this.passwordNum) {
					this.$dialog.toast({
						mes: '请输入密码',
						timeout: 1500
					});
					return
				}
				this.$root.ajax({
					name: 'course/pwd',
					params: {
						id: this.courseId,
						password: this.passwordNum
					}
				}).then((d) => {
					this.$router.push({
						name: 'courseClass',
						query: {
							id: this.courseId
						}
					})
				})
			},
			//安卓，苹果端登录
			getToken() {
				return new Promise((resolve, reject) => {
					let params = {};
					if(this.$root.isPc() == 'android') {
						params = {
							uid: this.$root.config.androidOrIosObj.user_uid,
							nick_name: this.$root.config.androidOrIosObj.user_name,
							avatar: this.$root.config.androidOrIosObj.user_photo,
							client: 1, //1安卓，2ios。3web
							item: 2, //1、报名通道；2、直销万事通APP
							channel: this.$root.config.channel,
							mobile: '',
						}
					} else {
						params = {
							uid: this.$root.config.androidOrIosObj.user_uid,
							nick_name: this.$root.config.androidOrIosObj.user_name,
							avatar: this.$root.config.androidOrIosObj.user_photo,
							client: 2, //1安卓，2ios。3web
							item: 2, //1、报名通道；2、直销万事通APP
							channel: this.$root.config.channel,
							mobile: '',
						}
					}
					this.$root.ajax({
						name: 'Index/loginin',
						params: params
					}).then((d) => {
						this.$root.userInfo = d.data
						sessionStorage.setItem('wst_dzw_userInfo', JSON.stringify(d.data));
						resolve()
					})
				})
			},
			//去下一个页面，直播，回放，预播
			goNext(item) {
				//清空密码
				this.listObj = {};

				if(item.kind === 0) {
					//判断是否需要密码
					//非（视频需要会员，且已经开通会员）
					if(item.member == 1) {
						if(this.mineObj.member_status != 1) {
							//弹出开通会员框
							this.$dialog.confirm({
								title: '温馨提示',
								mes: '该场直播需要开通会员权限才能观看',
								opts: [{
										txt: '取消',
										color: '#999999',
										callback: () => {

										},
									},
									{
										txt: '开通会员',
										color: '#35BF7E',
										callback: () => {
											this.$router.push({
												name: 'vipOpen'
											})
										}
									},
								]
							});
							return
						}
					}
					//判断是否需要密码
					if(item.bpass == 1) {
						//弹出密码框
						this.showPop = true;
						this.listObj = Object.assign({}, this.listObj, item)
						this.passwordNum = ''
						return
					}
					this.$router.push({
						name: 'liveRoom',
						query: {
							id: item.id,
						}
					})
				} else {
					this.$router.push({
						name: 'live',
						query: {
							id: item.id,
							kind: item.kind,
						}
					})
				}

			},
			getIndexCourseList() {
				this.$root.ajax({
					name: 'course/lst',
					params: {
						page: this.pageNum,
						count: this.pageCount,
					},
				}).then((d) => {
					
					for(let a = 0; a < d.data.course_list.length; a++) {
						d.data.course_list[a].price = this.$root.setMoneyZero(d.data.course_list[a],'price')
					}
					
					this.courseDataList = [...this.courseDataList, ...d.data.course_list];
					if(this.courseDataList.length >= d.data.course_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum++;
				})
			},

		}
	}
</script>

<style lang="scss">
	@import './liveListCourse.scss';
	#NoList {
		.span {
			padding-bottom: 1rem;
		}
	}
</style>